import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:top_foundation/utils/theme/theme.dart';
import 'package:whale/helper/utils/util.dart';

import 'package:whale/pages/msg_page/sub/date_picker_demo/state.dart';

import 'index.dart';
import 'widgets/chart_samples.dart';

import 'widgets/widgets/chart_holder.dart';

class ChartDemoPage extends GetView<ChartDemoController> {
  const ChartDemoPage({Key? key}) : super(key: key);

  // 主视图
  Widget _buildView() {
    final list = [
      ChartType.line,
      ChartType.bar,
      ChartType.pie,
      ChartType.radar,
      ChartType.scatter
    ];
    return ListView.builder(
      padding: EdgeInsets.symmetric(horizontal: 12.r),
      itemBuilder: (context, index) {
        final type = list[index];
        return TitleContentItemView(
          title: type.displayName,
          border: Border(bottom: ITheme.borderSide),
          onTap: () {
            Get.to(() => ChartTypeView(chartType: type));
          },
        );
      },
      itemCount: list.length,
    );
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<ChartDemoController>(
      builder: (_) {
        return Scaffold(
          appBar: AppBar(title: const Text("图表")),
          body: SafeArea(
            child: _buildView(),
          ),
        );
      },
    );
  }
}

class ChartTypeView extends StatelessWidget {
  const ChartTypeView({
    super.key,
    required this.chartType,
  });
  final ChartType chartType;
  @override
  Widget build(BuildContext context) {
    final samples = ChartSamples.samples;
    return Scaffold(
      appBar: detailAppBar(context),
      body: MasonryGridView.builder(
        itemCount: samples[chartType]!.length,
        key: ValueKey(chartType),
        padding: const EdgeInsets.only(
          left: 32,
          right: 32,
          top: 32,
          bottom: 32 + 68,
        ),
        crossAxisSpacing: 32,
        mainAxisSpacing: 32,
        itemBuilder: (BuildContext context, int index) {
          return ChartHolder(chartSample: samples[chartType]![index]);
        },
        gridDelegate: const SliverSimpleGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 600,
        ),
      ),
    );
  }
}
